import { defineComponent, reactive, toRaw } from 'vue'
import { columns, rows } from './uilts'
import { useSearch, useRequest } from '@/hooks'
import { clone } from 'ramda'
import { useRoute } from 'vue-router'
import CreateIndex from './components/createIndex'
import { deleteData } from '@/utils'
import { columns as moviesListColumns } from '@/views/movies/moviesList/uilts'
import Recommended from './components/recommended'
import { configCurryFilter } from '@/dictionaries/filter'
export default defineComponent({
    setup() {
        const $route = useRoute()
        const { searchForm, expand, expandToggle } = useSearch<API.server.moviesEpisode.getEpisodePage.Params>({})
        function search(is = true) {
            const params = clone(toRaw(searchForm.value))
            run({
                ...params,
                ...getPagination(is),
                movieId: Number($route.params.id)
            } as any)
        }
        const { run, data, getPagination, renderPagination, loading } = useRequest(
            API.server.moviesEpisode.getEpisodePage.request,
            {
                manual: false,
                pagination: true,
                defaultParams: [{
                    movieId: Number($route.params.id),
                }]
            }
        )
        if ($route.params.id) {
            search(true)
            getRecommendationsInfo()
            getMovieInfo()
        }
        const pageState = reactive({
            visible: false,
            dataSource: {} as defs.server.MoviesEpisodeEntity,
            activeKey: 'episode',
            recommendations: [] as defs.server.MovieEntity[],
            movie: {} as defs.server.MovieEntity
        })
        const recommendedState = reactive({
            visible: false,
        })
        async function getRecommendationsInfo() {
            const { success, data } = await API.server.movie.getRecommendations.request(Number($route.params.id))
            if (success) {
                pageState.recommendations = data
            }
        }
        async function getMovieInfo() {
            const { success, data } = await API.server.movie.getMovieInfo.request(Number($route.params.id))
            if (success) {
                pageState.movie = data
            }
        }
        function tableHeader() {
            return [
                <a-button
                    type="primary"
                    v-auth="add"
                    onClick={() => {
                        pageState.visible = true
                        pageState.dataSource = {} as defs.server.MoviesEpisodeEntity
                    }}
                >
                    新增
                </a-button>,
            ]
        }
        function actionRender({ record }: F.RableSlotScope<defs.server.MoviesEpisodeEntity>) {
            return (
                <a-space size="middle">
                    <a-button
                        type="link"
                        block
                        v-auth="edit"
                        onClick={() => {
                            pageState.dataSource = clone(record)
                            pageState.visible = true
                        }}
                    >
                        编辑
                    </a-button>
                    <a-button type="link" v-auth="del" block danger onClick={() =>
                        deleteData({ id: record.id as number },
                            API.server.moviesEpisode.deleteEpisode.request,
                            () => search(false)
                        )
                    }>
                        删除
                    </a-button>
                </a-space>
            )
        }
        return () => <div style="background: #fff;padding: 20px;">
            <a-descriptions title="电影详情" bordered>
                <a-descriptions-item label="剧集标题">{pageState.movie.name}</a-descriptions-item>
                <a-descriptions-item label="封面">{pageState.movie.cover ? <a-image width={50} src={pageState.movie.cover} />
                    : '-'}</a-descriptions-item>
                <a-descriptions-item label="语言">{configCurryFilter('lang', pageState.movie.lang)}</a-descriptions-item>
                <a-descriptions-item label="是否免费">{configCurryFilter('freeType', pageState.movie.free)}</a-descriptions-item>
                <a-descriptions-item label="类型">{pageState.movie.category?.join('，')}</a-descriptions-item>
                <a-descriptions-item label="标签">{pageState.movie.tags?.join('，')}</a-descriptions-item>
                <a-descriptions-item label="是否上架">{configCurryFilter('status', pageState.movie.status)}</a-descriptions-item>
                <a-descriptions-item label="是否推荐">{configCurryFilter('flag1', pageState.movie.isRecommend)}</a-descriptions-item>
                <a-descriptions-item label="播放量">{pageState.movie.playCount}</a-descriptions-item>
            </a-descriptions>
            <a-tabs v-model={[pageState.activeKey, 'activeKey']}>
                <a-tab-pane key="episode" tab="剧情列表">
                    <f-table
                        v-slots={{
                            header: tableHeader,
                            actionRender
                        }}
                        columns={columns}
                        dataSource={data.value?.data?.data}
                        loading={loading.value}
                        rowKey="id"
                        tableKey="episodeTable"
                        scroll={{ y: 450 }}
                    />
                    {renderPagination()}
                </a-tab-pane>
                <a-tab-pane key="recommendedMovies" tab="推荐电影">
                    <f-table
                        v-slots={{
                            header: () => {
                                return <a-button
                                    type="primary"
                                    v-auth="add"
                                    onClick={() => {
                                        recommendedState.visible = true
                                    }}
                                >
                                    新增
                                </a-button>
                            },
                            actionRender: ({ record }: F.RableSlotScope<defs.server.MoviesEpisodeEntity>) => {
                                return (
                                    <a-button type="link" v-auth="del" block danger onClick={() =>
                                        deleteData({
                                            movieId: Number($route.params.id),
                                            recommendedId: record.id as number
                                        },
                                            API.server.movie.removeRecommendation.request,
                                            () => getRecommendationsInfo()
                                        )
                                    }>
                                        删除
                                    </a-button>
                                )
                            }
                        }}
                        columns={moviesListColumns}
                        dataSource={pageState.recommendations}
                        loading={loading.value}
                        rowKey="id"
                        tableKey="recommendedMoviesTable"
                        scroll={{ y: 450 }}
                    >
                    </f-table>
                </a-tab-pane>
            </a-tabs>

            <CreateIndex
                visible={pageState.visible}
                dataSource={pageState.dataSource}
                onCancel={() => {
                    pageState.visible = false
                    pageState.dataSource = {} as defs.server.MoviesEpisodeEntity
                }}
                onSearch={() => search(false)}
            />
            <Recommended
                movie={pageState.movie}
                v-model={[recommendedState.visible, 'visible']}
                onSubmit={getRecommendationsInfo}
            />
        </div>
    }
})